<template>
  <div class="box">
    <div class="box1">
      <van-nav-bar
        title="用户登录"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="box2" style="padding: 50px 10px">
      <div
        style="
          float: left;
          float: left;
          position: relative;
          left: 72px;
          padding: 10px 10px;
        "
      >
        <p>欢迎进入</p>
        <p>pig元宇宙</p>
      </div>
      <div style="float: right; padding: 10px 10px">
        <img
          style="
            float: right;
            width: 100px;
            border-radius: 50%;
            position: relative;
            right: 62px;
          "
          src="/favicon.ico"
        />
      </div>
    </div>

    <div class="box3" style="padding: 20px 10px">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button
            @click="UserLogin(username, password)"
            round
            block
            type="info"
            native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
      <p @click="goRegister" style="text-align: center">注册</p>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import UserApi from "@/api/User/UserApi";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/frontHome/index" });
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    goRegister() {
      this.$router.push({ name: "Register" });
    },
    UserLogin(username, password) {
      UserApi.userLogin(username, password).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          if (res.data.data.userStatus == 1) {
            // debugger
            // console.log(res.data.data.userInfo)
            // 状态正常
            // 将信息存到浏览器
            sessionStorage.setItem("userId", res.data.data.userId);
            sessionStorage.setItem("userName", res.data.data.userName);
            sessionStorage.setItem("userStatus", res.data.data.userStatus);
            sessionStorage.setItem("userAuth", res.data.data.userAuth);
            sessionStorage.setItem("token", res.data.data.token);
            sessionStorage.setItem(
              "userInfo",
              JSON.stringify(res.data.data.userInfo)
            );
            if (res.data.data.userAuth == 2 || res.data.data.userAuth == 1) {
              Toast.success(res.data.message);
              this.$router.push({name: 'Index'})
            } else {
              Toast.fail(res.data.message);
            }
          }
        }else{
          Toast.fail(res.data.message);
        }
      });
    },
  },
};
</script>

<style scoped>
</style>